<!--
 * @Author: CNN 969682281@qq.com
 * @Date: 2023-07-10 09:36:20
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-09-04 09:30:06
 * @FilePath: \newMould_BHZ\src\components\TensionAndGrout\TensionManage\TensionRealTime\TensioningCharts.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="com-container" style="fontsize: 12px;">
    <div class="com-chart com-charts" ref="echarts" style="z-index: 555; position: relative;width: 930px;"
      :style="{ 'height': h }">
    </div>
  </div>
</template>

<script>
export default {
  props: ["commonData", "height"],
  // props: ["temperatureX", "temperatureY"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      total1: null,
      xDatas: null,
      h: null,
      xDatas2: null
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          this.xDatas = newVal[0];
          this.allData = newVal[1];
          this.total1 = newVal[2];
          this.xDatas2 = newVal[3];
          // setTimeout(() => {

          this.initChart();
          window.addEventListener("resize", this.screenAdapter);
          // 在页面加载完成的时候, 主动进行屏幕的适配
          this.screenAdapter();
          // }, 150);
        }
      },
      immediate: true,
    },
  },

  mounted() {
    this.h = this.height + 'px'
  
    var that = this
    // setInterval(() => {

    // }, 200
    // )
    setTimeout(() => {
      that.initChart();

      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 150);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    formatRoundNum(num) {
      let integer = Math.ceil(num)
      let length = String(integer).length

      return Math.ceil(integer / Math.pow(10, length - 1)) * Math.pow(10, length - 1)
      // *Math.pow(10,length-1)
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);


      var max = this.xDatas[0];//获取后端传入x轴最大数据
      for (var i = 0; i < this.xDatas.length; i++) {//取最大值
        if ((this.xDatas[i] - 0) > (max - 0)) {
          max = (this.xDatas[i] - 0);
        }
      }
      var that = this
      let brr = [];
      // setTimeout(() => {
      var newxDatas = [0, ...that.xDatas];



      //         var s = 21;
      // var t = 8;


      for (let id in newxDatas) {
        if (id > 0) {
          var m = ((newxDatas[id] - 0) & (newxDatas[id - 1]) - 0) + (((newxDatas[id] - 0) ^ (newxDatas[id - 1]) - 0) >> 1);
          // brr.push((newxDatas[id] - 0) - (newxDatas[id - 1]) - 0)
          brr.push(m)
        }
      }

      // }, 200);
      var newXdata = []
      var newYdata = []
      var nerw2 = []
      var newYdata2 = []
      var newYdata3 = []
      for (var j = 0; j <= this.formatRoundNum(max); j++) {//生成数组
        newXdata.push(j)
        newYdata.push("")
        newYdata2.push("")
        newYdata3.push("")

        nerw2.push("")
      }

      //   设置间隔
      var interval = 0
      if (max <= 100) {
        interval = 9
      } else if (max <= 500) {
        interval = 49
      } else if (max <= 1000) {
        interval = 99
      } else if (max <= 2000) {
        interval = 499
      } else if (max <= 5000) {
        interval = 999
      } else if (max <= 10000) {
        interval = 9999
      }


      for (var b = 0; b < nerw2.length; b++) {
        for (var c = 0; c < brr.length; c++) {
          if (b == (brr[c] - 0)) {
            nerw2[b] = brr[c]
          }
        }

      }
      // for (var d = 0; d < this.xDatas2.length; d++) {
      //   newYdata[this.xDatas2[d]] = this.xDatas2[d]
      // }
      // newYdata2
      for (var a = 0; a < this.xDatas.length; a++) {
        newYdata[this.xDatas[a]] = this.allData[a]
      }
      for (var d = 0; d < brr.length; d++) {
        newYdata2[brr[d]] = this.xDatas2[d]
        newYdata3[brr[d]] = 0

      }

      const payload = {
        id: "left-bottom-1",
        title: "钢筋间距(mm)",
        wordNum: 3,
        data: {
          // y: ["60", "45", "70", "24", "66"],
          y: newYdata,
          // x: [
          //   "04-29 14:59",
          //   "04-29 15:59",
          //   "04-29 16:59",
          //   "04-29 17:59",
          //   "04-29 18:59",
          // ],
          x: newXdata,
        },
      };

      const data = payload.data.y;
      const x = payload.data.x;
      // 定义变量xIndex 表示X轴序号, Ymonth 表示柱状图的label值
      // var Ymonth;
      var option = {
        // grid: {
        //   left: 15,
        //   right: 20,
        //   bottom: 20,
        //   top: 5,
        //   containLabel: true,
        // },
        grid: [{
          left: 15,
          right: 20,
          bottom: 20,
          top: 5,
          containLabel: true,
        },
        {

          left: '4%',
          right: '2.1%',
          bottom: '80',

        }],
        // tooltip: {
        //   trigger: "axis",
        //   backgroundColor: "rgba(9, 30, 60, 0.6)",
        //   extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
        //   borderWidth: 0,
        //   confine: false,
        //   appendToBody: true,
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 10,
        //   },
        // },
        legend: {
          width: window.innerWidth < 1600 ? "100%" : "60%",
          icon: "rect",
          top: 7,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            color: "rgba(23, 26, 29, 1)",
            fontSize: 14,
          },
          align: "left",
        },
        xAxis: [
          {

            type: 'category',
            zlevel: 2,

            axisTick: { show: true, inside: true, },   // 坐标轴刻度是否朝内，默认朝外 },
            splitLine: {
              show: false,
            },
            axisLabel: {
              // interval: 0,
              interval: interval,
              rotate: 0,
              color: "rgba(23, 26, 29, 1)",
              fontSize: 14,
            },
            axisLine: {
              show: true,
            },
            boundaryGap: false, // 取消坐标轴两边留白
            // data:x
            data: x
          }, {

            gridIndex: 1,
            boundaryGap: false, // 取消坐标轴两边留白
            axisTick: { show: false },   // 坐标轴刻度是否朝内，默认朝外 },
            // position: 'top',
            // show: false,
            axisLabel: {
              show: false
            },
            type: 'category',    // 坐标轴类型
            data: x,

            // data: ['2018年', '2019年', '2020年', '2021年', '2022年'],
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0,0,0,0.5)',
              },
            },
            // inverse: true,    // 是否是反向坐标轴
          },
          {



            // axisLabel: {
            //     padding: [0, 0, 0, -20]    // 四个数字分别为上右下左与原位置距离
            // },

          },

        ],
        yAxis: [{
          // name: 'Y方向位置（mm）',
          // nameTextStyle: {
          //   align: 'left',
          //   height: 150,
          //   width: 20,
          // },
          // nameRotate: 90,
          // nameLocation: 'left',

          type: 'value',
          // inverse: true,
          axisTick: { show: false },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
        },
        {

          type: 'value',
          gridIndex: 1,

        },



        ],

        series: [
          {
            type: "bar",
            barWidth: 4,
            data: data,
            color: "#146fd7",
            label: {
              normal: {
                show: true,
                position: 'top',
                fontSize: 15,
                color: '#0B9FC7',
                offset: [0, -20]
              }
            },
            // label: {
            //   show: true,
            //   position: "top",
            //   // 标签刻度值位置
            //   offset: [0, -15],
            //   fontSize: 16,
            //   formatter: function (params) {
            //     // 判断收益是否大于0, 或者是否对应当前数据
            //     if (params.value === 0 || params.value !== Ymonth) {
            //       return "";
            //     } else {
            //       return params.value;
            //     }
            //   },
            // },
          },
          {
            type: "scatter",
            symbolSize: 8,
            itemStyle: {
              borderWidth: 2.5,
              borderColor: "#146fd7",
              color: "#146fd7",
              opacity: 1,
            },
            silent: true,
            markLine: {
              symbol: ["none", "none"],
              data: [

                {
                  name: "平均数",
                  yAxis: this.total1,
                  lineStyle: { type: "solid", color: "red", width: 1 }, // 样式： 线型、颜色、线宽
                },

              ],
            },
            data: data,
          },
          {
            type: "bar",
            data: newYdata3,
            label: {
              normal: {
                show: true,
                position: 'top',
                fontSize: 15,
                color: '#0B9FC7',
                offset: [0, -40],
                formatter: function (params) {
                  return newYdata2[params.dataIndex]
              
                },
              }
            },
          }
        ],
      };
      this.chartInstance.setOption(option);
    },

    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;
      //   和分辨率大小相关的配置项
      const adapterOption = {
        legend: {
          textStyle: {
            fontSize: titleFontSize * 1.2,
          },
          // itemWidth: titleFontSize * 1.2876,
          itemHeight: titleFontSize * 1.2876,
          itemGap: titleFontSize * 3,
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        series: [
          {
            barWidth: 3, //柱子宽
          },
          // {
          //   barWidth: titleFontSize * 7, //柱子宽度
          // },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope></style>